<template>
  <div id="paymentModel">
    <el-table
      :data="formData.list"
      border
      style="width: 100%">
      <el-table-column
        prop="name"
        label="商户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="businessNo"
        label="商户号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="privateKey"
        label="公钥">
      </el-table-column>
      <el-table-column
        prop="publicKey"
        label="私钥">
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          <el-switch 
            v-model="scope.row.status"  
            active-value="1"   
            inactive-value="0"  
            @change="switchChange(scope.row)"   
            active-color="#67C23A"  inactive-color="#909399" size="mini">
          </el-switch>
        </template>
      </el-table-column>
       <el-table-column
            label="详细信息"
            width="230">
            <template slot-scope="scope">
                  <el-button size="mini" type="info" @click="details(scope.row)">查看详情</el-button>
                  <el-button size="mini" type="danger" @click="deletes(scope.row)">修改</el-button>
              </template>
          </el-table-column>
    </el-table>
    <!--查看详情提示框-->
    <el-dialog width="500px" :visible.sync="dialogFormVisible1">
      <el-form  ref="form" :model="form">
           <h3 style="text-align:center;" :value="item.name" v-for="item in formData.list">{{item.name}}</h3>
           <el-form-item label="商户号 :" :label-width="formLabelWidth">
             <span  :value="item.businessNo" v-for="item in formData.list">{{item.businessNo}}</span>
           </el-form-item>

           <el-form-item label="公    钥 :" :label-width="formLabelWidth">
              <span :value="item.privateKey" v-for="item in formData.list">{{item.privateKey}}</span>
          </el-form-item>
          <el-form-item label="密   钥 2 :" :label-width="formLabelWidth">
               <span :value="item.publicKey" v-for="item in formData.list">{{item.publicKey}}</span>
          </el-form-item> 

          <el-form-item label="备用字段1 :" :label-width="formLabelWidth">
               <span :value="item.backup1" v-for="item in formData.list">{{item.backup1}}</span>
          </el-form-item>
          <el-form-item label="备用字段2 :" :label-width="formLabelWidth">
               <span :value="item.backup2" v-for="item in formData.list">{{item.backup2}}</span>
          </el-form-item>
          <el-form-item label="备用字段3 :" :label-width="formLabelWidth">
               <span :value="item.backup3" v-for="item in formData.list">{{item.backup3}}</span>
          </el-form-item>
          <el-form-item label="备用字段4 :" :label-width="formLabelWidth">
               <span :value="item.backup4" v-for="item in formData.list">{{item.backup4}}</span>
          </el-form-item>
          <el-form-item label="备用字段5 :" :label-width="formLabelWidth">
               <span :value="item.backup5" v-for="item in formData.list">{{item.backup5}}</span>
          </el-form-item>
       </el-form>
    </el-dialog>
    <!--提示框-->
    <el-dialog  :visible.sync="dialogFormVisible2">
      <el-form  ref="form" :model="form">
          <el-form-item label="商户名" :label-width="formLabelWidth">
            <el-input v-model="deleteStatus.name"  auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="商户号" :label-width="formLabelWidth">
            <el-input v-model="deleteStatus.businessNo"  auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="公钥" :label-width="formLabelWidth">
              <el-input v-model="deleteStatus.privateKey"  auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="私钥" :label-width="formLabelWidth">
              <el-input v-model="deleteStatus.publicKey"  auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="备用字段1" :label-width="formLabelWidth">
              <el-input v-model="deleteStatus.backup1"  auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="备用字段2" :label-width="formLabelWidth">
              <el-input v-model="deleteStatus.backup2"  auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="备用字段3" :label-width="formLabelWidth">
              <el-input v-model="deleteStatus.backup3"  auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="备用字段4" :label-width="formLabelWidth">
              <el-input v-model="deleteStatus.backup4"  auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="备用字段5" :label-width="formLabelWidth">
              <el-input v-model="deleteStatus.backup5"  auto-complete="off"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button style="margin-right:200px;" type="primary" @click="savedeleteStatus">保存</el-button>
      </div>
    </el-dialog>    
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          pageSize: 3,
          pageNumber: 1,
          lottertyId: undefined
        },
        formData:[],
        detailStatus:'',//详情页对话框显示的内容的数组
        deleteStatus:'',//修改按钮对话框显示的内容的数组
        dialogFormVisible1:false,
        dialogFormVisible2:false,
        formLabelWidth: '120px',
        value1: true,
        value2: true
        
      }
    },
     created () {  
        this.getData();
    },
    methods:{
      //获取全部数据
      getData(){
       this.$api.payoff(this.form).then(res=>{
            if(res.code=='000000'){
              this.formData = res.data
              this.formData.list.forEach((item)=>{
                      item.status=item.status+''
              })
            }
          });
     },
     // 表格中修改商品按钮弹出框
    details(row){ 
        this.dialogFormVisible1 = true;
    },
    //修改
    deletes(row){
        this.deleteStatus = row;//把本行数据赋给deleteStatus（对话框显示的内容的数组）

        this.dialogFormVisible2 = true;
    },
    //保存修改的内容
    savedeleteStatus(){
      this.$api.savepay(this.deleteStatus).then(res => {
          if (res.code === '000000') {
            this.$message.success('修改成功')
            this.getData()
            this.dialogFormVisible2 = false
          }
        })
    },
    //状态开关
    switchChange(val){
        this.$api.savepay(val).then(res => {
            if (res.code === '000000') {
          } 
        })
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  #paymentModel{
    margin:20px;
  }
  input.el-input__inner{
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 35px;
    line-height: 1;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 80%!important;
    }
   #paymentModel .el-dialog__header {
    padding: 0 0 0!important;
  }
</style>
